#{extends 'main.html' /}
#{set title:'Home' /}
#{set 'moreScripts'}
    #{script 'index.js'/}
#{/set}

#{set 'moreStyles'}
	#{stylesheet 'index.css'/}
#{/set}

<div class = "steps"> 
	<img id="firstImage" class="imageStep scaledImage" src = "public/images/banner01.jpg" alt="three steps"/>
</div> 
#{form @Invite.index()}
<div class = "main"> 
	<div class="restaurantList">
	#{if restaurantList}
		#{list items:restaurantList, as:'restaurant'}
                <div class="restaurant">
                    <h2 class="restaurant-title">
                        <a href="#">${restaurant.name}</a>
                    </h2>
                </div>
        #{/list}
	#{/if}
	
	</div>
	<div class="content"> 
		<div class = "datePicker" >
			<div id="datePickerWrapper">
				Date: <input id = "date" type="date"/>
				Hour: <input id ="hour" type="time"/>
				<input id = "submitButton" type="submit" class="button" value ="Weiter" onclick = "makeAppointment()">  </input>
				
			</div>
		</div>
		<div class = "meals" >
		#{if meals}
			#{list items:meals, as:'meal'}
	                <div id = ${meal.getEntityId()} class="meal">
	                	<div class="mealDetails">
	                		<div class="mealTitle">${meal.title}</div>
	                		<div class="mealCategory">${meal.category} </div>
	                		<div class="mealDescription">${meal.description}</div>
	                	</div>
	                	<div class="selectMeal">
	                		${meal.price}€
	                		<input type="checkbox"> </input>
	                	</div>
	                </div>
	        #{/list}
		#{/if}
		</div>
	</div>
</div>
#{/form}

